

import React, { useState } from 'react';
import { Tabs, List, Card, Button, Tag, Modal, Radio, message } from 'antd';
import { PhoneOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import {
  PageContainer,
} from '@ant-design/pro-components';
const TABS = [
  { key: 'all', label: '全部' },
  { key: 'pending', label: '待审核' },
  { key: 'tag', label: '待签收' },
  { key: 'returned', label: '已驳回' },
  { key: 'done', label: '已完成' },
];

const mockList = [
  {
    id: 1,
    type: '直采入库',
    status: '待入库审核',
    statusColor: 'orange',
    urge: true,
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm...共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    showUrge: true,
  },
  {
    id: 2,
    type: '定向申请采购',
    status: '待入库审核',
    statusColor: 'orange',
    urge: true,
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm...共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    showUrge: true,
  },
  {
    id: 3,
    type: '定向申请采购',
    status: '已完成',
    statusColor: 'green',
    urge: false,
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm...共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    showUrge: false,
  },
  {
    id: 4,
    type: '直采入库',
    status: '已驳回',
    statusColor: 'gray',
    urge: false,
    desc: '得力日记本A5-200页，晨光圆珠笔0.5mm...共9个类别30件物品',
    price: 135,
    applicant: '张老师',
    time: '2025年4月25日13:30:34',
    showUrge: true,
  },
];

const storeManagers = [
  { name: '张xx', phone: '137xxxxxxxx' },
  { name: '李xx', phone: '138xxxxxxxx' },
];

const PurchaseRecordAppoint: React.FC = () => {
  const [tab, setTab] = useState('all');
  const [urgeModal, setUrgeModal] = useState<{ open: boolean; id?: number }>({ open: false });
  const [urgeType, setUrgeType] = useState<'store' | 'applicant' | null>(null);
  const [selectedManager, setSelectedManager] = useState(0);
  const [reasonModal, setReasonModal] = useState<{ open: boolean; reason?: string }>({ open: false });

  // 过滤列表
  const filteredList = tab === 'all' ? mockList : mockList.filter(item => {
    if (tab === 'pending') return item.status === '待入库审核';
    if (tab === 'tag') return item.status === '待签收';
    if (tab === 'returned') return item.status === '已驳回';
    if (tab === 'done') return item.status === '已完成';
    return true;
  });

  //嵌套弹窗逻辑
  const handleUrge = (item: any) => {
    if (item.status === '待入库审核') {
      setUrgeType('store');
      setUrgeModal({ open: true, id: item.id });
    } else if (item.status === '待签收') {
      setUrgeType('applicant');
      setUrgeModal({ open: true, id: item.id });
    } else if (item.status === '已驳回') {
      setReasonModal({ open: true, reason: '采购商品数量不足' });
    }
  };

  return (
    <PageContainer >
      <Tabs
        activeKey={tab}
        onChange={setTab}
        items={TABS.map(t => ({ key: t.key, label: t.label }))}
        style={{ marginBottom: 16 }}
      />
      <List
        dataSource={filteredList}
        renderItem={item => (
          <Card style={{ marginBottom: 16 }} bodyStyle={{ padding: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <span style={{ fontWeight: 500 }}>采购类型: {item.type}</span>
                <Tag color={item.statusColor} style={{ marginLeft: 8 }}>{item.status}</Tag>
              </div>
              {item.status === '待入库审核' && <span style={{ color: '#faad14', fontWeight: 500 }}>待入库审核</span>}
              {item.status === '已完成' && <span style={{ color: '#52c41a', fontWeight: 500 }}>已完成</span>}
              {item.status === '已驳回' && <span style={{ color: '#999', fontWeight: 500 }}>已驳回</span>}
            </div>
            <div style={{ color: '#666', margin: '8px 0' }}>采购物品：{item.desc}</div>
            <div style={{ fontWeight: 600, fontSize: 18, color: '#222' }}>￥{item.price}元</div>
            <div style={{ color: '#888', fontSize: 12, margin: '4px 0' }}>采购申请人：{item.applicant}</div>
            <div style={{ color: '#888', fontSize: 12 }}>采购时间：{item.time}</div>
            <div style={{ textAlign: 'right', marginTop: 8 }}>
              {item.showUrge && (
                <Button type="primary" size="small" onClick={() => handleUrge(item)}>
                  催审核
                </Button>
              )}
              {item.status === '已驳回' && (
                <Button size="small" style={{ marginLeft: 8 }} onClick={() => setReasonModal({ open: true, reason: '采购商品数量不足' })}>
                  查看原因
                </Button>
              )}
            </div>
          </Card>
        )}
      />
      {/*嵌套弹窗：催审核*/}
      <Modal
        open={urgeModal.open}
        onCancel={() => setUrgeModal({ open: false })}
        footer={null}
        width={340}
        centered
        closeIcon
      >
        {urgeType === 'store' ? (
          <div>
            <div style={{ marginBottom: 16 }}>请选择库管：</div>
            <Radio.Group
              value={selectedManager}
              onChange={e => setSelectedManager(e.target.value)}
              style={{ display: 'flex', flexDirection: 'column', gap: 8 }}
            >
              {storeManagers.map((m, idx) => (
                <Radio value={idx} key={m.name}>
                  库管：{m.name} {m.phone}
                </Radio>
              ))}
            </Radio.Group>
            <Button
              type="primary"
              block
              style={{ marginTop: 24 }}
              icon={<PhoneOutlined />}
              onClick={() => {
                message.success('已拨打 ' + storeManagers[selectedManager].phone);
                setUrgeModal({ open: false });
              }}
            >
              立即拨打
            </Button>
          </div>
        ) : urgeType === 'applicant' ? (
          <div>
            <div style={{ marginBottom: 16 }}>申领人：张老师 134xxxxxxxx</div>
            <Button
              type="primary"
              block
              style={{ marginTop: 24 }}
              icon={<PhoneOutlined />}
              onClick={() => {
                message.success('已拨打 134xxxxxxxx');
                setUrgeModal({ open: false });
              }}
            >
              立即拨打
            </Button>
          </div>
        ) : null}
      </Modal>
      {/*驳回原因弹窗*/}
      <Modal
        open={reasonModal.open}
        onCancel={() => setReasonModal({ open: false })}
        footer={[
          <Button key="ok" type="primary" onClick={() => setReasonModal({ open: false })}>知道了</Button>,
        ]}
        width={340}
        centered
      >
        <div style={{ textAlign: 'center', padding: 24 }}>
          <ExclamationCircleOutlined style={{ fontSize: 32, color: '#faad14' }} />
          <div style={{ margin: '16px 0' }}>{reasonModal.reason}</div>
        </div>
      </Modal>
    </PageContainer>
  );
};

export default PurchaseRecordAppoint;
